<template>
	<div id="Main">
		<div class="title_div">
			<span><img src="../assets/address.png"></span>
			<span>北京理工大学国防科技园2号楼十层</span>
			<span><img src="../assets/tips.png"></span>
		</div>
		<div class="search_div">
			<img src="../assets/search.png" />
			<span>山姆会员商店优惠商品</span>
		</div>
		<div class="image_div">
			<img src="../assets/logo2.png" />
		</div>
		 <div class="imges_div">
		      <div class="imgs_div" v-for="items in frist_list">
		        <img :src="items.img"/>
		        <p>{{items.titleName}}</p>
		      </div>
		    </div>
			<div class="imges_div">
			     <div class="imgs_div" v-for="items in frist_list">
			       <img :src="items.img"/>
			       <p>{{items.titleName}}</p>
			     </div>
			   </div>
			   <div class="kong_div"></div>
			       <div class="fujindianpu">
			         <div class="span_div">
			           <span>附近店铺</span>
			         </div>
			         <div v-for="itme in datalist_dianpu">
			           <div class="dianpu" v-for="it in itme.shops">
			             <div class="dianpu_logo">
			               <img :src="it.imgs" />
			             </div>
			             <div class="dianpu_jianjie">
			               <p>{{it.text1}}</p>
			               <div class="jianjie_div" v-for="aa in it.jianjie">
			                 <span>{{aa.sp1}}</span>
			                 <span>{{aa.sp2}}</span>
			                 <span>{{aa.sp3}}</span>
			               </div>
			               <p class="vip_p">{{it.vipyouhui}}</p>
			             </div>
			           </div>
			         </div>
					 </div>
	</div>
</template>

<script>
	  export default{
	    data(){
	      return{
	        frist_list:[
	          {"titleName":"超市便利","img":require("../assets/超市.png")},
	          {"titleName":"菜市场","img":require("../assets/菜市场.png")},
	          {"titleName":"水果店","img":require("../assets/水果店.png")},
	          {"titleName":"鲜花绿植","img":require("../assets/鲜花.png")},
	          {"titleName":"医药健康","img":require("../assets/医药健康.png")}
	        ],
	         two_list:[
	                  {"titleName":"超市便利","img":require("../assets/超市.png")},
	                  {"titleName":"菜市场","img":require("../assets/菜市场.png")},
	                  {"titleName":"水果店","img":require("../assets/水果店.png")},
	                  {"titleName":"鲜花绿植","img":require("../assets/鲜花.png")},
	                  {"titleName":"鲜花绿植","img":require("../assets/医药健康.png")}
	                ],
	                datalist_dianpu: [
	                  {
	                    shops: [{imgs: require("../assets/超市.png"),text1: "沃尔玛",
	                        jianjie: [{sp1: "月售1万+",sp2: "起送¥0",sp3: "基础运费¥5"}],
	                        vipyouhui: "VIP尊享满89元减4元运费券（每月3张）"}]
	                  }, {
	                    shops: [{imgs: require("../assets/超市.png"),text1: "沃尔玛1",
	                        jianjie: [{sp1: "月售1万+",sp2: "起送¥0",sp3: "基础运费¥5"}],
	                        vipyouhui: "VIP尊享满89元减4元运费券（每月3张）"
	                      }
	                    ]
	                  }
	                ]
	              }
	            }
	          }
</script>

<style scoped>
	.title_div{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 16px;
	}
	.title_div :nth-child(1){
		width: 13.1px;
		height: 16.2px;
		padding-left: 10.2px;
	}
	.title_div :nth-child(2){
		font-size: 16px;
		color: #333333;
	}
	.title_div :nth-child(3){
		width: 16.5px;
		height: 14.7px;
		padding-right: 19.3px;
	}
	.search_div{
		width: 339px;
		height: 32px;
		border-radius: 16px;
		background: #F5F5F5;
		margin-top: 16px;
		margin-left: 18px;
		display: flex;
	}
	.search_div img{
		width: 15.9px;
		height: 16px;
		line-height: 16px;
		padding-left: 16px;
		padding-top: 8px;
		
	}
	.search_div span{
		font-size: 14px;
		color: #B7B7B7;
		padding-left: 12.1px;
		line-height: 16px;
		padding-top: 8px;
	}
	.image_div{
		margin-left: 14px;
		margin-top: 12px;
		width: 339px;
		height: 86px;
	}
	.imges_div{
	      margin-left: 26px;
	      margin-right: 26px;
	      padding-top: 6px;
	      display: flex;
	      justify-content: space-between;
		  margin-top: 16px;
	    }  
	    .imgs_div img{
	      height: 40px;
	      width: 40px;  
	      
	    }
	    .imgs_div p{
	      padding-top: 6px;
	      font-size: 12px;
	      color: #333333;
	      text-align: center;
	    }
		  .kong_div{
		      width: 100%;
		      height: 10px;
		      background-color:#F8F8F8 ;
		    }
		    .span_div{
		      margin-left: 18px;
		      padding-top: 16px;
		    }
		    .span_div span{
		      font-size: 18px;
		      color: #333333;
		    }
		    .dianpu {
		      display: flex;
		      padding-top: 14px;
		      padding-left: 18px;
		    }
		    .dianpu_logo img {
		      width: 56px;
		      height: 56px;
		      padding-top: 14px;
		    }
		    .dianpu_jianjie {
		      flex: 1;
		      padding-left: 16px;
		    }
		    .dianpu_jianjie p {
		      font-size: 16px;
		      color: #333333;
		    }
		    .dianpu_jianjie div {
		      padding-top: 8px;
		    }
		    .jianjie_div span {
		      font-size: 13px;
		      color: #333333;
		      padding-right: 16px;
		    }
		    .fujindian .vip_p {
		      font-size: 13px;
		      color: #e93b3b;
		      padding-top: 8px;
		      padding-bottom: 12px;
		      border-bottom: #F1F1F1 solid 1px;
		    }
</style>

